<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>关于我</title>
	
		<link rel="stylesheet" type="text/css" href="./css/自定义栅格.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
		<link rel="shortcut icon" href="./img/qinlin.jpg">
		<script src="./js/public.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		/*头部特殊样式*/
		#header .container ul li.aboutMe {background: #08C3B4;}
		/*头部特殊样式结束*/
		
		/*侧边栏部分*/
		.aboutMe_con {width: 100%;margin:5px;overflow: hidden;height: 100%;}
		.aboutMe_con .container{overflow: hidden;}
		.aboutMe_con .container .menu {float: left;background: #404040;border-radius: 5px;}
		.aboutMe_con .container .menu ul {}
		.aboutMe_con .container .menu ul li {height: 100%;color: #fff;display: block;line-height: 30px;padding-left: 5px;font-size:14px}
		.aboutMe_con .container .menu ul.introduce li:hover {background: #08C3B4;}
		.aboutMe_con .container .menu ul .me{text-align: center;padding: 5px ;position: relative;width:90%;height: 320px;margin-bottom: 10px;overflow: hidden;}
		.aboutMe_con .container .menu ul .me .photo{width:1400px;position: absolute;}
		.aboutMe_con .container .menu ul .me ul{position: absolute;left: 45%;bottom:20px;}
		.aboutMe_con .container .menu ul .me img{width: 350px;height:300px;margin: 0 auto;border-radius:5px;float: left;}
		.aboutMe_con .container .menu ul .me li{width: 10px;height: 10px;background: #000;border-radius:50%;display: inline-block;}
		.aboutMe_con .container .menu ul.skill .title{width: 100%;background: #17726B;}
		.aboutMe_con .container .menu ul.skill .title i{width: 30px;height: 30px;}
		.aboutMe_con .container .menu ul.skill .title,.title i{font-size: 17px;}
		.aboutMe_con .container .menu ul.skill li{margin: 5px 0px;}
		.aboutMe_con .container .menu ul.skill li .kinds{line-height: 1em;}
		.aboutMe_con .container .menu ul.skill li span{width: 30%;margin-left:5px;}
		.aboutMe_con .container .menu ul.skill li .pro{width:60%;height: 10px;background: #7FE5D0;margin-top:5px;float: left;}
		.aboutMe_con .container .menu ul.skill li .progress1:before{display: block;content: '';width: 65%;height: 100%;background: #1388DF;}
		.aboutMe_con .container .menu ul.skill li .progress2:before{display: block;content: '';width: 80%;height: 100%;background: #1388DF;}
		.aboutMe_con .container .menu ul.skill li .progress3:before{display: block;content: '';width: 90%;height: 100%;background: #1388DF;}
		.aboutMe_con .container .menu ul.skill li .progress4:before{display: block;content: '';width: 80%;height: 100%;background: #1388DF;}
		.aboutMe_con .container .menu ul.skill li .progress5:before{display: block;content: '';width: 70%;height: 100%;background: #1388DF;}
		.aboutMe_con .container .menu ul.skill li .progress6:before{display: block;content: '';width: 85%;height: 100%;background: #1388DF;}
		/*侧边栏部分结束*/
		
		/*内容部分*/
		.aboutMe_con .container .mainContent {float: left;padding: 10px 10px 10px;color: #000;border:1px dashed #f40;border-radius: 10px;}
		.aboutMe_con .container .mainContent .title{width: 100%;height: 30px;border-bottom: 2px solid #000;}
		.aboutMe_con .container .mainContent .title span{font-size: 18px;font-weight: bold;}
		.aboutMe_con .container .mainContent .aboutMe-info{width: 100%;font-size: 20px;color: #f40;text-align: center;font-weight: 800;font-family: "宋体";}
		.aboutMe_con .container .mainContent .info{width: 100%;}
		.aboutMe_con .container .mainContent .info p{word-break: break-word;font-size: 14px;}
		.aboutMe_con .container .mainContent  .info ul{margin-bottom:20px;/*border-bottom:1px dashed #f40 ;*/padding: 0px 0px 0px 40px;}
		.aboutMe_con .container .mainContent  .info ul li{padding:0px 5px;margin: 10px 0;line-height: 30px;font-size: 14px;}
		.aboutMe_con .container .mainContent  .info .major{font-weight: bold;}
		.aboutMe_con .container .mainContent  .info ul li .exp_title{font-weight: bold;font-size: 14px;width: 100%;text-align: center;}
		/*.aboutMe_con .container .mainContent  .info ul.descAboutMe{margin-bottom:0px}*/
		/*内容部分结束*/
	</style>

	<body>
		<div id="myHome">
			<!--头部开始-->
			<div id="header" class="clearfix">
				<div class="header_fix">
					<div class="container">
						<div class="row clearfix" >
							<a href="index.html"  class="col-xs-6 logo"><i></i></a>
						<ul>
							<a href="index.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-mu"></i>
									<span>首页</span>
								</li>
							</a>
							<a href="aboutMe.html" class="col-xs-6 ">
								<li class="aboutMe">
									<i class="iconfont icon-wo"></i>
									<span>关于我</span>
								</li>
							</a>
							<a href="music.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-yinle"></i> 音乐
								</li>
							</a>
							<a href="photos.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-zhaopian"></i>
									<span>相册</span>
								</li>
							</a>
							<a href="diary.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-diary"></i>
									<span>日记</span>
								</li>
							</a>
							<a href="travel.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-lvhang1"></i> 旅行
								</li>
							</a>

							<a href="contactME.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-dianhua"></i>
									<span>联系我</span>
								</li>
							</a>
							<a href="webProduct.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-xiangmu"></i>
									<span>web作品展示</span>
								</li>
							</a>
						</ul>
						</div>
						
					</div>
				</div>

			</div>
			<!--头部结束-->
			<!--内容部分-->
			<div class="aboutMe_con">
				<div class="container">
					<div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 menu">
						<ul class="introduce ">
							<div class="me">
								<div class="photo">
									<img src="./img/15.jpg"/>
									<img src="./img/11.jpg"/>
									<img src="./img/qinlin.jpg" />
									<img src="./img/15.jpg"/>
								</div>
								<ul>
									<li></li>
								    <li></li>
									<li></li>
								</ul>
								<div class="turn_left turn"></div>
								<div class="turn_right turn"></div>
							</div>
							<li>
									<i class="iconfont icon-wo"></i>
									<span style="font-weight: bold;font-size: 16px;">姓名：张琴琳</span>
								</li>
								<li>
									<i class="iconfont icon-xiangmu"></i>
									<span>1992/07</span>
								</li>
								<li >
									<i class="iconfont icon-didian"></i>
									<span>湖南省长沙市</span>
								</li>
								<li>
									<i class="iconfont icon-dianhua3"></i>
									<span>电话：17377876272</span>
									<span style="color: yellow;">(随时欢迎致电)</span>
								</li>
								<li>
									<i class="iconfont icon-wo"></i>
									<span>1639425708@qq.com</span>
								</li>
						</ul>
						<ul class="skill">
							<div class="title"><i class="iconfont icon-mu1"></i>技能、特长</div>
							<li>
								<div class="kinds">英语交际</div>
								<div class="progress1 pro">
								</div>
								<span>熟练</span>
							</li>
							<li>
								<div class="kinds">办公软件</div>
								<div class="progress2 pro">
								</div>
								<span>熟练</span>
							</li>
							<li>
								<div class="kinds">html+css</div>
								<div class="progress3 pro">
								</div>
								<span>精通</span>
							</li>
							<li>
								<div class="kinds">javascript</div>
								<div class="progress4 pro">
								</div>
								<span>精通</span>
							</li>
						</ul>
						
						<ul class="skill">
							<div class="title"><i class="iconfont icon-mu1"></i>兴趣、爱好</div>
							<li>
								<div class="kinds">看书</div>
								<div class="progress5 pro">
								</div>
								<span>认真</span>
							</li>
							<li>
								<div class="kinds">旅行</div>
								<div class="progress6 pro">
								</div>
								<span>很享受</span>
							</li>
							
						</ul>
						
					</div>
					<div class="col-lg-9 col-md-9 col-sm-7 col-xs-12 mainContent">
						<div class="aboutMe-info">
							张琴琳个人简历
						</div>
						<div class="title">
							<i class="iconfont icon-liebiao"></i>
							<span>教育背景</span>
						</div>
						<div class="info">
							<ul>
								<li> <span class="major">求职岗位:web前端开发工程师</span>
								</li>
								<li>
									<span>2011.09-2015.06</span>
									<span>北京物资学院</span>
									<span>专业：信息管理与信息系统</span>
									<span>学位：本科</span>
								</li>
								<li>
									<span class="major">主修课程:</span>
									<p class="courses">信息系统分析与设计，管理信息系统，Oracle数据库，java程序设计，JSP网站开发,信息资源管理。</p>
								</li>
							</ul>
						</div>
						<div class="title">
							<i class="iconfont icon-liebiao"></i>
							<span>个人技能</span>
						</div>
						<div class="info">
							<ul>
								<li>1.熟练使用office软件,熟悉photoshop,dreamweaver，SPSS等软件，大学英语过6级。</li>
								<li>2.熟练掌握网站前端开发语言html，css，js, jQuery , angular JS，微信小程序，能用node.js搭建后台服务器环境，熟练掌握ajax与后台进行数据交互来渲染前端页面，会数据库分析与设计，会写SQL语句等；</li>
							</ul>
						</div>
						<div class="title">
							<i class="iconfont icon-liebiao"></i>
							<span>工作经历</span>
						</div>
						<div class="info">
							<ul>
								<li>
									<div class="exp_title">
										2016.10-2017.10 自学前端半年+培训半年
									</div>
									<p>
										对前端很感兴趣，自学半年前端html,javascript等技术，以及培训机构系统学习，查漏补缺。目前熟练掌握前端编程语言html，css样式，javascript脚本语言，jQuery，bootstrap,微信小程序，node.js，angular,了解less语言;能处理各大浏览器的兼容问题，熟练掌握ajax与服务器数据交互，具有面向对象的编程思想。主要作品（美团网整站开发、淘宝移动端首页布局，个人博客网站（实现自适应）、小米商城首页等）
									</p>
								</li>
								<li>
									<div class="exp_title">
										2016/04 -- 2017/09 兆荣联合（北京）科技发展有限公司|无线增值业务运营经理
									</div>
									<p>
										在无线增值业务运营部，能独立写产品策划，对业务申报，接入，运营，推广能流程熟悉，与渠道合作方对接业务，分配代码，协调跟进跟合作方的数据同步技术对接，能协调解决各流程中出现的问题，并能主动寻合适的合作商合作.
									</p>
								</li>
								<li>
									<div class="exp_title">
										2014/9-2015/2 美图网总部|运营专员实习生
									</div>
									<p>
										在美团网公司（总部）实习期间，负责企业运营的业务，跟商家电话沟通，确认门店信息，丰富美团商家数据库信息，以及处理美团品牌商家的资料整理和搜集，配合主管做数据统计分析的工作。
									</p>
								</li>

							</ul>
						</div>
						<div class="title">
							<i class="iconfont icon-liebiao"></i>
							<span>自我评价</span>
						</div>
						<div class="info">
							<ul class="descAboutMe">
								<li>本人性格乐观开朗，能够吃苦耐劳，工作积极主动，勤勤恳恳。易于融入集体文化，能与他人建立良好的关系。具有团队合作精神，创新意识，有进取心，对工作负责，学习能力强。</li>
							</ul>
						</div>
					</div>
			    </div>
			</div>
			<!--内容部分结束-->

			<!--底部部分-->
			<div id="footer">
				<div class='container'>
					<div class='footer_link'>web前端学习常用链接：
						<a href="https://github.com/">github</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
					</div>
					<p>本网站作者：张琴琳，所有的内容由本人原创，侵权必究。</p>
				</div>
			</div><br />
			<!--底部部分结束-->

			<!--回到顶部按钮-->
			<div class="toTOP">
				<div class="f_top">

				</div>
			</div>
			<!--回到顶部按钮结束-->
		</div>
		<script src="./js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//轮播图轮播效果
				var c = 0;
				var width = $('.photo img').width();
				var l ;
			//定时器执行函数
				 function test(){
						c++;
						if(c==4){
							$('.photo').css({"left":"0px"});
							c=1;
						}
						 l = -width*c;
						$('.photo').stop().animate({"left":l+'px'})
						if(c==3){
							$('.me ul li').eq(0).css({'background':'red'}).siblings('li').css({'background':'black'});
						}else{
							$('.me ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
						}
				 }
				//设置定时器
				var timer = setInterval(test,1000);
				//设置小圆点的切换
				$('.me ul li').mouseenter(function(){
					       var jqthis = $(this);
							clearInterval(timer);
							tt = setTimeout(function(){
								c = jqthis.index();
								l= -width*c;
								$('.photo').stop().animate({"left":l+'px'})
								$('.me ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
							},200)
							
						})
			$('.me ul li').mouseleave(function(){
		                    clearTimeout(tt);
				            timer = setInterval(test,1000);
						})
			$(".turn").hover(function(){
				clearInterval(timer);
			},function(){
				timer = setInterval(test,1000);
			})
			
			$(".turn_left").on("click",function(){
				if($(".photo").is(":animated")){
        		  return 
        	     }
				c--;
				c = c<0?2:c;
				l = -width*c;
				$('.photo').stop().animate({"left":l+'px'})
				$('.me ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
			})
			
			$(".turn_right").on("click",function(){
				if($(".photo").is(":animated")){
        		  return 
        	     }
				c++;
				c = c>2?0:c;
				l= -width*c;
				$('.photo').stop().animate({"left":l+'px'})
				$('.me ul li').eq(c).css({'background':'red'}).siblings('li').css({'background':'black'});
			})
			
			
		</script>
	</body>

</html>